<template>
  <!-- 简答题 -->
  <div class="create-short-answer">
    <!-- 题目类型 -->
    <span>{{ number+1 }}. 简答题</span>
    <n-input v-model:value="shortAnswerData.title" type="textarea" placeholder="设置题目" class="textarea"  clearable/>

    <!-- 分值 -->
    <label class="score">
      <span>分值:</span>
      <n-input-number placeholder="分值" :min="0" :max="20" v-model:value="shortAnswerData.score" />
    </label>
    <!--  -->
    <n-input v-model:value="shortAnswerData.answer" type="textarea" placeholder="设置参考答案" class="textarea" clearable/>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { openInfo } from "@/utils/openInfo";
const props = defineProps(['shortAnswerData','number'])
// 父组件给的数据
const shortAnswerData =props.shortAnswerData
const number = props.number

</script>

<style scoped>
/* 设置题目 */
.textarea {
  margin: 10px 0px 10px 0px;
}
/* 分值 */
.score {
  display: flex;
  align-items: center;
}

/* 分值二字文本 */
.score span {
  width: 40px;
  cursor: pointer;
}

/* 全部选项框 */
.options {
  width: 100%;
}

/* 单个选项框 */
.option {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* 添加选项 */
.add-option {
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  font-style: italic;
  color: rgb(65, 63, 61, 0.8);
  transition: color 0.3s ease, text-decoration 0.3s ease, font-size 0.3s ease;
}

.add-option:hover {
  color: rgba(22, 112, 112, 0.8);
  text-decoration: underline dashed;
  font-size: 15px;
}

/* 删除选项图标 */
.delete-img {
  margin-left: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.delete-img:hover {
  transform: scale(1.2);
}
</style>